<template>
  <div class="home">
    <div class="body">
      <div class="content">
        <div id="top">
          <div>
            <div id="title">
              <LayoutOutlined style="margin-right: 5px" />
              {{ Info.filename }}
            </div>
            <div>收录{{ Info.articlesNum }}篇文章 {{ Info.fansNum }}人关注</div>
          </div>
          <a-button @click="doAsFollow">关注</a-button>
        </div>
        <Varticle :listdata="AsList"></Varticle>
      </div>
      <div class="sider">
        <li>这里是专题页面</li>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { LayoutOutlined } from "@ant-design/icons-vue";
import Varticle from "../userHome/article.vue";
import { showCollection, att_on_coll } from "../../api/showPage";
import { message } from "ant-design-vue";

export default defineComponent({
  setup() {
    let route = useRoute();
    let Info = reactive({
      filename: "",
      fansNum: "",
      articlesNum: "",
    });
    let AsList = ref([]);

    const doAsFollow = () => {
      att_on_coll({
        url: "/showPage/att_on_coll",
        cid: route.query.cid,
        success: (res) => {
          // console.log(res.data);
          message.info(res.data);
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    showCollection({
      url: "/showPage/showCollection",
      cid: route.query.cid,
      success: (res) => {
        // console.log(res.data);
        Info.filename = res.data.filename;
        Info.fansNum = res.data.fansNum;
        Info.articlesNum = res.data.articlesNum;
        if (res.data.AsList.length == 0) {
          AsList.value.length = 0;
        } else {
          AsList.value.length = 0;
          for (let i = 0; i < res.data.AsList.length; i++) {
            AsList.value.push({
              aid: res.data.AsList[i].aid,
              author: res.data.AsList[i].name,
              title: res.data.AsList[i].title,
              description: res.data.AsList[i].intr,
              coverImg: res.data.AsList[i].coverImg,
              viewNum: res.data.AsList[i].viewNum,
              likeNum: res.data.AsList[i].likeNum,
              collectionNum: res.data.AsList[i].collectionNum,
              commentNum: res.data.AsList[i].commentNum,
            });
          }
        }
      },
      err: (err) => {
        console.log(err);
      },
    });

    return {
      Info,
      AsList,
      doAsFollow,
    };
  },
  components: {
    LayoutOutlined,
    Varticle,
  },
});
</script>

<style scoped>
.home {
  min-height: 630px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f1fffd;
}
.body {
  min-height: 630px;
  width: 66%;
  padding-top: 20px;
  margin: 0 17% 0 17%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.content {
  height: auto;
  width: 70%;
  padding: 20px 20px 0 20px;
  margin: 0;
  min-width: 530px;
  background: #edf9ff;
}
.sider {
  height: auto;
  width: 30%;
  padding: 20px 20px 0 20px;
  margin: 0 0 0 10px;
  min-width: 200px;
  background: #edf9ff;
}
#top {
  padding: 0 10px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#title {
  font-size: 20px;
}
</style>